import IntegrationTable, {
	IntegrationTableProps,
	OperatingItem,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { DynamicFormItem } from "@/components/DynamicForm";
import { arrayToObject, getArray, getString, getObject } from "phinney-toolkit";
import { Tabs, Button, Input, TimePicker, Image, Tag } from "antd";
import moment from "moment";
import { detail, task, award } from "./service";

// @page 商家
const Business: React.FC<any> = () => {
	let isUnMounted = false;
	//任务列表
	const [taskList, setTaskList] = useState<any>([]);
	//奖品列表
	const [awardList, setAwardList] = useState<any>([]);
	// 获取全部任务
	const getTaskList = async () => {
		const res = await task({
			pageIndex: 1,
			pageSize: 100,
		});
		!isUnMounted &&
			setTaskList(
				getArray(res?.data.records).map((item: any) => ({
					label: item?.taskTitle,
					value: item?.taskCode,
				}))
			);
	};

	// 获取全部奖品
	const getAwardList = async () => {
		const res = await award({
			pageIndex: 1,
			pageSize: 100,
		});
		!isUnMounted &&
			setAwardList(
				getArray(res?.data).map((item: any) => ({
					label: item?.rewardName,
					value: item?.rewardCode,
				}))
			);
	};

	const classList = [
		{ label: "必过活动", value: 10 },
		{ label: "常规活动", value: 20 },
	];

	const activityLotteryType = [
		{ label: "每天", value: 10 },
		{ label: "每周五", value: 20 },
	];

	const activityPurpose = [
		{ label: "拉新人数", value: 10 },
		{ label: "日活", value: 20 },
	];

	const taskType = [
		{ label: "固定任务", value: 10 },
		{ label: "随机任务", value: 20 },
	];

	const taskRewards = [
		{ label: "固定现金", value: 10 },
		{ label: "随机现金", value: 20 },
	];

	const rewardTypeList = [
		{ label: "一等奖", value: 1 },
		{ label: "二等奖", value: 2 },
		{ label: "三等奖", value: 3 },
		{ label: "四等奖", value: 4 },
		{ label: "五等奖", value: 5 },
	];

	const columnss: ProColumns[] = [
		{
			title: "任务序列",
			dataIndex: "taskTimes",
			search: false,
		},
		{
			title: "任务名称",
			dataIndex: "taskTitle",
			search: false,
		},
		{
			title: "任务条件",
			dataIndex: "taskCodes",
			render: (_, record: any) => {
				if (record.taskCodes) {
					let taskCodesList = record.taskCodes.split(",");
					return taskCodesList.map((item: any) => {
						return <Tag color="blue">任务:{item}</Tag>;
					});
				} else {
					return "-";
				}
			},
		},
		{
			title: "奖励标题",
			dataIndex: "rewardTitle",
			search: false,
		},
		{
			title: "任务奖励",
			dataIndex: "taskRewardType",
			search: false,
			valueEnum: {
				10: "固定现金",
				20: "随机现金",
			},
		},
	];

	const columnsss: ProColumns[] = [
		{
			title: "奖品ID",
			dataIndex: "rewardCode",
			search: false,
		},
		{
			title: "奖品信息",
			dataIndex: "taskTitle",
			search: false,
			render: (_, record: any) => {
				if (record.rewardIcon) {
					return (
						<div>
							<Image.PreviewGroup>
								<Image
									src={record.rewardIcon}
									style={{ padding: 2 }}
									width={50}
									alt=""
								/>
							</Image.PreviewGroup>
							<div>{record.rewardName}</div>
						</div>
					);
				} else {
					return <div>-</div>;
				}
			},
		},
		{
			title: "奖品类型",
			dataIndex: "rewardType",
			search: false,
			valueEnum: {
				1: "一等奖",
				2: "二等奖",
				3: "三等奖",
				4: "四等奖",
				5: "五等奖",
			},
		},
		{
			title: "奖品数量",
			dataIndex: "rewardNum",
			search: false,
		},
		{
			title: "真实奖品数量",
			dataIndex: "rewardMaxNum",
			search: false,
		},
		{
			title: "奖品解锁条件",
			dataIndex: "rewardLimit",
			search: false,
		},
		{
			title: "抽奖概率",
			dataIndex: "acc",
			search: false,
		},
	];
	// 表格项
	const columns: ProColumns[] = [
		{
			title: "任务模板ID",
			dataIndex: "activityCode",
		},
		{
			title: "活动名称",
			dataIndex: "activityTitle",
			search: false,
		},
		{
			title: "活动说明",
			dataIndex: "activityDesc",
			search: false,
		},
		{
			title: "活动类型",
			dataIndex: "activityType",
			valueEnum: {
				20: "常规活动",
				10: "必过活动",
			},
		},
		{
			title: "活动目标",
			dataIndex: "activityPurpose",
			search: false,
			valueEnum: {
				20: "日活",
				10: "拉新人数",
			},
		},
		{
			title: "活动开奖类型",
			dataIndex: "activityLotteryType",
			search: false,
			valueEnum: {
				20: "每周五",
				10: "每天",
			},
		},
		{
			title: "活动预算(每期每人)",
			dataIndex: "activityMoney",
			search: false,
		},
	];

	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "upload",
				label: "活动banner图",
				name: "activityBanner",
				required: true,
				fieldProps: {
					limit: 1,
				},
			},
			{
				type: "text",
				label: "活动标题",
				name: "activityTitle",
				required: true,
			},
			{
				type: "text",
				label: "活动描述",
				name: "activityDesc",
				required: true,
			},
			{
				type: "select",
				label: "活动类型",
				required: true,
				name: "activityType",
				options: classList,
			},
			{
				type: "select",
				label: "活动目的",
				name: "activityPurpose",
				required: true,
				options: activityPurpose,
			},
			{
				type: "select",
				label: "活动开奖类型",
				name: "activityLotteryType",
				required: true,
				options: activityLotteryType,
			},
			{
				type: "text",
				label: "活动预算",
				name: "activityMoney",
				required: true,
			},
			{
				label: "活动发起时间",
				name: "activityLotteryTime",
				type: "time",
				required: true,
				fieldProps: {
					format: "HH:mm",
				},
			},
			{
				label: "活动结束时间",
				name: "activityLotteryStopTime",
				type: "time",
				required: true,
				fieldProps: {
					format: "HH:mm",
				},
				render: (record) => {
					console.log(record);
				},
			},
		];
	};

	const getFormItemsSend = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "text",
				label: "任务名称",
				name: "taskTitle",
				required: false,
				fieldProps: {
					disabled: true,
				},
			},
			{
				type: "select",
				label: "任务类型",
				name: "taskType",
				options: taskType,
				required: false,
				fieldProps: {
					onSelect: (option: any, form: any) => {
						console.log(option);
						vm.setState({ taskType: option });
					},
				},
			},
			...(vm.state.taskType == "10"
				? [
						{
							type: "select",
							label: "选择任务",
							name: "taskCodes",
							required: false,
							options: taskList,
							fieldProps: {
								mode: "multiple",
							},
						},
				  ]
				: []),
			{
				type: "text",
				label: "任务奖励标题",
				name: "rewardTitle",
				required: false,
				fieldProps: {
					disabled: true,
				},
			},

			{
				type: "select",
				label: "任务奖励",
				name: "taskRewardType",
				required: false,
				options: taskRewards,
				fieldProps: {
					onSelect: (option: any, form: any) => {
						console.log(option);
						vm.setState({ taskRewardNum: option });
					},
				},
			},

			...(vm.state.taskRewardNum == 20
				? [
						{
							type: "text",
							label: "随机现金上限",
							name: "taskRewardMaxMoney",
							required: false,
						},
						{
							type: "text",
							label: "随机现金下限",
							name: "taskRewardMinMoney",
							required: false,
						},
				  ]
				: []),

			...(vm.state.taskRewardNum == 10
				? [
						{
							type: "text",
							label: "固定金额",
							name: "taskRewardMoney",
							required: false,
						},
				  ]
				: []),
		];
	};

	const getFormItemsSend2 = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		return [
			{
				type: "text",
				label: "概率",
				name: "acc",
				required: true,
			},
			{
				type: "select",
				label: "奖品编号",
				name: "rewardCode",
				required: true,
				options: awardList,
			},
			{
				type: "text",
				label: "奖品真实数量",
				name: "rewardMaxNum",
				required: true,
				options: taskRewards,
			},
			{
				type: "text",
				label: "解锁条件（小区人数）",
				name: "rewardLimit",
				required: true,
			},
			{
				type: "select",
				label: "奖品类型",
				name: "rewardType",
				required: true,
				options: rewardTypeList,
			},
		];
	};

	const handelFunc = (vm: any) => {
		let params = {
			rowKey: "taskRewardCode",
			scroll: { x: 1000 },
			columns: columnss,
			search: false,
			isInModal: true,
			toolBarRender: false,
			toolbar: false,
			PageHeaderWrapper: false,
			listProps: {
				url: "/activity-task-reward/get-task-reward-list-by-activity",
				method: "GET",
				requestType: "params",
				formProps: {
					labelCol: { span: 4 },
				},
				paramsHandle: (params: any, record: any) => {
					return {
						...params,
						activityCode: vm.state.record.activityCode,
					};
				},
			},
			updateProps: {
				url: "/activity-task-reward/edit-task-reward",
				method: "POST",

				modalProps: {
					formProps: {
						labelCol: { span: 8 },
					},
					title: "编辑任务/奖励",
					formItemsHandle: (_: any, vm: any) => {
						return getFormItemsSend(vm, true);
					},
					formValuesHandle: (record: any) => {
						return {
							...record,
							taskCodes: record?.taskCodes?.split(","),
						};
					},
					content: {
						onInit: (vm: any) => {
							let result = vm.state?.record;
							vm.setState({
								taskType: result.taskType,
								taskRewardNum: result.taskRewardType,
							});
						},
					},
				},
				paramsHandle: async (params: any) => {
					return {
						...params,
						taskCodes: getArray(params.taskCodes).toString(),
					};
				},
			},
		};
		let params2 = {
			rowKey: "activityRewardCode",
			scroll: { x: 1000 },
			columns: columnsss,
			search: false,
			isInModal: true,
			// toolBarRender: false,
			toolbar: false,
			PageHeaderWrapper: false,
			listProps: {
				url: "/activity-reward/get-reward-list-by-activity",
				method: "GET",
				requestType: "params",
				paramsHandle: (params: any, record: any) => {
					return {
						...params,
						activityCode: vm.state.record.activityCode,
					};
				},
			},
			addProps: {
				url: "/activity-reward/insert-reward",
				method: "POST",
				requestType: "params",
				paramsHandle: (params: any) => {
					return {
						...params,
						activityCode: vm.state.record.activityCode,
					};
				},
				modalProps: {
					title: "添加活动奖品",
					formProps: {
						labelCol: { span: 10 },
					},
					formItemsHandle: (_: any, vm: any) => {
						return getFormItemsSend2(vm);
					},
				},
			},
			updateProps: {
				url: "/activity-reward/edit-reward",
				method: "POST",
				modalProps: {
					title: "编辑活动奖品",
					formProps: {
						labelCol: { span: 10 },
					},
					formItemsHandle: (_: any, vm: any) => {
						return getFormItemsSend2(vm, true);
					},
				},
			},
		};
		return (
			<div>
				<Tabs>
					<Tabs.TabPane tab="活动任务和奖励" key="1">
						<IntegrationTable {...params} />
					</Tabs.TabPane>
					<Tabs.TabPane tab="活动奖品" key="2">
						<IntegrationTable {...params2} />
					</Tabs.TabPane>
				</Tabs>
			</div>
		);
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "activityCode",
		scroll: { x: 1000 },
		columns,
		listProps: {
			url: "/base-activity/get-base-activity-page-list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
		addProps: {
			url: "/base-activity/insert-base-activity",
			method: "POST",
			paramsHandle: ({
				activityLotteryTime,
				activityLotteryStopTime,
				...params
			}): any => {
				params.activityBanner = (
					params?.activityBanner?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
					activityLotteryTime: moment(activityLotteryTime).format("HH:mm"),
					activityLotteryStopTime: moment(activityLotteryStopTime).format(
						"HH:mm"
					),
				};
			},
			modalProps: {
				formProps: {
					labelCol: { span: 8 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm);
				},
			},
		},
		updateProps: {
			url: "/base-activity/update-base-activity-basics",
			method: "POST",
			paramsHandle: ({
				activityLotteryTime,
				activityLotteryStopTime,
				...params
			}): any => {
				params.activityBanner = (
					params?.activityBanner?.map((item: any) => item.url) || []
				).join(",");
				return {
					... ,
					activityLotteryTime: moment(activityLotteryTime).format("HH:mm"),
					activityLotteryStopTime: moment(activityLotteryStopTime).format(
						"HH:mm"
					),
				};
			},
			modalProps: {
				formProps: {
					labelCol: { span: 8 },
				},
				formValuesHandle: async (record: any) => {
					const res = await detail({
						activityCode: record?.activityCode,
					});
					const {
						activityBanner,
						activityLotteryTime,
						activityLotteryStopTime,
						...others
					} = getObject(res?.data);

					return {
						...others,
						activityBanner: activityBanner
							? [
									{
										uid: "-1",
										status: "done",
										name: activityBanner,
										url: activityBanner,
									},
							  ]
							: [],
						activityLotteryTime: moment(activityLotteryTime, "HH:mm"),
						activityLotteryStopTime: moment(activityLotteryStopTime, "HH:mm"),
					};
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm, true);
				},
			},
		},
		handleOperating: (items: OperatingItem[]) => [
			{
				type: "modal",
				props: {
					btnText: "活动配置",
					modalProps: {
						width: 1200,
						footer: false,
						title: "活动配置",
						content: {
							render: (vm: any, getModalRef: any) => {
								return handelFunc(vm);
							},
						},
						onCancel: (table: any) => {
							table?.reload();
						},
					},
					paramsHandle: ({ roleCode, status }: any, record: any) => ({
						userCode: record?.userCode,
						status,
						roleCodes: getArray(roleCode).toString(),
					}),
				},
			},
			...items,
		],
	};

	// 初始化加载数据
	useEffect(() => {
		getTaskList();
		getAwardList();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
